<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.css">
</head>
<body>
    <div class="container">
        <h1>this is the first page</h1>

        <form>
            <input type="text" placeholder="name" name = "name" />
            <input type="button" value="查找" onclick="doFindGoods()" />
            <input type="button" value="新增" onclick="toInsert()" />
        </form>

        <table class="table">
            <tr>
                <th>id</th>
                <th>name</th>
                <th>remark</th>
                <th>createdTime</th>
                <th colspan="2">Operation</th>
            </tr>
            <tr th:each="brand : ${list}">
                <td th:text="${brand.id}">ID</td>
                <td th:text="${brand.name}">Name</td>
                <td th:text="${brand.remark}">Remark</td>
                <td th:text="${brand.createdTime}">CreatedTime</td>
                <td><input class="btn btn-danger" type="button" th:onclick="doDeleteGoodsById([[${brand.id}]])" value="删除"></td>
                <td><input class="btn btn-warning" type="button"
                           th:onclick="toUpdate([[${brand.id}]], [[${brand.name}]], [[${brand.remark}]])"
                           value="修改"></td>
            </tr>
        </table>
        <div>
            <form class="form-inline" th:action="@{/goods/UpdateGoods}" method="post" style="display: none">
                <div class="form-group">
                    <label for="ID">ID</label>
                    <input type="text" class="form-control" id="ID" placeholder="ID" name="id" readonly>
                </div>
                <div class="form-group">
                    <label for="nameId">name</label>
                    <input type="text" class="form-control" id="nameId" placeholder="姓名" name = "name">
                </div>
                <div class="form-group">
                    <label for="remarkId">remark</label>
                    <textarea class="form-control" id="remarkId" placeholder="备注" name="remark"></textarea>
                </div>
                <button type="submit" class="btn btn-default">修改</button>
            </form>
        </div>
    </div>
<script type="text/javascript">

    function doFindGoods() {
        let name = document.forms[0].name.value;
        location.href = `http://localhost/goods/findGoods/${name}`;
    }

    function toInsert() {
        location.href = "/goods/toInsert";
    }

    function doDeleteGoodsById(id) {
        if(confirm("确认要删除该行吗?")){
            location.href = `http://localhost/goods/deleteGoodsById/${id}`;
        }
    }

    function toUpdate(id, name, remark) {

        document.forms[1].style.display = "block";
        document.forms[1].id.value = id;
        document.forms[1].name.value = name;
        document.forms[1].remark.value = remark;
    }



</script>

</body>
</html>